<template>
  <el-dialog
    center
    width="70%"
    title="选择项目文件夹"
    v-model="pageData.dialogVisible"
    :before-close="handleClose"
  >
    <div class="dialog-content-layout hor-layout">
      <div class="content-left-layout ver-layout">
        <el-input v-model="pageData.inputValue" clearable></el-input>
        <el-tree
          ref="tree2"
          node-key="id"
          class="project-tree-view"
          show-checkbox
          default-expand-all
          highlight-current
          check-on-click-node
          check-strictly
          :data="pageData.projectTreeData"
          :props="pageData.defaultProps"
          :filter-node-method="filterNode"
          @check-change="handleCheckChange"
        >
        </el-tree>
      </div>
      <div class="select-project-layout ver-layout-center">
        <div style="margin-bottom: 10px">选择的项目路径</div>
        <el-tag
          closable
          style="margin: 5px 0"
          @close="removeLinkProject(item)"
          v-for="(item, index) in pageData.selectProject"
        >
          {{ item.label }}
        </el-tag>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="pageData.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelectProject"> 确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElTree } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { managePlugin } from '../plugins/managePlugin'
import { convertDataToTreeData } from '../utils/project/project_utils'

const emit = defineEmits(['confirmSelectProject'])
const tree2 = ref<InstanceType<typeof ElTree>>()

interface Tree {
  [key: string]: any
}

const pageData = reactive({
  inputValue: '',
  dialogVisible: false,
  projectTreeData: [],
  selectProject: []
})

watch(
  () => pageData.inputValue,
  (val) => {
    tree2.value!.filter(val)
  }
)

//过滤节点
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

//选择项目路径
const handleCheckChange = (data, checked, indeterminate) => {
  if (checked) pageData.selectProject.push(data)
  else {
    let selectTreeIndex = pageData.selectProject.findIndex((item) => item == data)
    if (selectTreeIndex > -1) pageData.selectProject.splice(selectTreeIndex, 1)
  }
}

//确认选择项目路径标签
const confirmSelectProject = () => {
  let linkProject = pageData.selectProject.map((item) => {
    return { id: item.id, label: item.label }
  })
  emit('confirmSelectProject', linkProject)
  pageData.dialogVisible = false
}

//删除关联的项目
const removeLinkProject = (projectItem) => {
  pageData.selectProject = JSON.parse(JSON.stringify(pageData.selectProject))
  pageData.selectProject.splice(pageData.selectProject.indexOf(projectItem), 1)
  let linkKeys = pageData.selectProject.map((item) => item.id)
  tree2.value.setCheckedKeys(linkKeys)
}

//显示弹窗
const showDialog = (linkProject = []) => {
  pageData.inputValue = ''
  pageData.dialogVisible = true
  pageData.selectProject = []
  tree2.value && tree2.value.setCheckedKeys([])
  let linkKeys = linkProject.map((item) => item.id)
  setTimeout(() => tree2.value.setCheckedKeys(linkKeys))
}

// 对外暴露方法
defineExpose({
  showDialog
})

//页面渲染
onMounted(async () => {
  let projectData = await managePlugin.getProjectDirsRender()
  console.log('projectTreeData', projectData)
  pageData.projectTreeData = convertDataToTreeData(projectData)
})
</script>

<style scoped lang="less">
.dialog-content-layout {
  .content-left-layout {
    width: 50%;

    .project-tree-view {
      width: 100%;
      height: 300px;
      overflow-y: auto;
      border: 1px solid #ededed;
    }
  }

  .select-project-layout {
    margin-left: 20px;
    flex-shrink: 0;
  }
}
</style>
